<template>
<div class="signin-container">
    <div id="form">
        <Input class="form-field" style="width: 250px;" clearable placeholder="ئىسمىڭىز" v-model="user.name">
            <Icon slot="prepend" type="ios-contact" />
        </Input>
        <Input class="form-field" style="width: 250px;" clearable placeholder="ئەزالىق نامىڭىز" v-model="user.signInName">
            <Icon slot="prepend" type="ios-contact" />
        </Input>
        <Input class="form-field" style="width: 250px;" clearable placeholder="پارولىڭىز" type="password" v-model="user.signInPassword">
            <Icon slot="prepend" type="ios-lock-outline" />
        </Input>
        <Input class="form-field" style="width: 250px;" clearable placeholder="قايتا پارولىڭىز" type="password" v-model="user.signInPassword_Repeat">
            <Icon slot="prepend" type="ios-lock-outline" />
        </Input>
        <Button class="form-field" style="width: 100px; background-color: #3BA776; color: white;" @click="signUp">ھىسابات قۇرۇش</Button>

    </div>
    <div id="form-logo">
        <img src="../../static/pictures/notes.svg" style="width: 150px;" id="logo">
    </div>
</div>
</template>

<style lang="scss" scoped>

$primary-color: #3BA776;

.signin-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    // background-color: red;
}



#form {
    width: 400px;
    height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: {
        style: solid;
        width: 1px;
        color: $primary-color;

        bottom: {
            right-radius: 70px;
        }
    }

    direction: ltr;

}

.form-field {
    margin: 8px;
}

p {
    color: $primary-color;
    text-shadow: 0px 0px 10px $primary-color;
}

#form-logo {
    width: 200px;
    height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: {
        style: solid;
        width: 1px;
        color: $primary-color;
    }

    background-color: $primary-color;
}
#logo:hover {
     transform: rotate(-20deg) scale(1.3);
}
.ivu-icon {
    color: $primary-color;
}
</style>


<script>

import notice from "./notice"
import webApi from '../../../../../../Softwares/Project/SpringDictUI/SpringDictUI/src/webApi';

export default {
    data(){
        return {
            user: {
                name: "",
                signInName: "",
                signInPassword: "",
                signInPassword_Repeat: ""
            }
        }
    },
    computed: {
        buttonDisabled(){
            return this.user.signInPassword_Repeat != this.user.signInPassword || this.user.signInPassword.length < 5 || this.user.name == "" || this.user.signInName == ""
        }
    },
    methods: {
        async signUp(){
            if (this.buttonDisabled){
                notice.showSignUpRequiments()
            }
            else {
                try {
                    await webApi.signUp(this.user.name, this.user.signInName, this.user.signInPassword)
                    notice.signUpSuccess()

                    this.$router.push({
                        name: "SignIn"
                    })
                }
                catch(exception){
                    notice.signUpError()
                    notice.checkAndShowServerError(exception)
                }
            }
        }
    }
}
</script>
